<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://lib.baomitu.com/vue/2.5.1/vue.js"></script>
	<style>
		.red{
			color: blue;
		}
		.thin{
			font-weight: 200;
		}
		.italic{
			font-style: italic;
		}
		.active{
			letter-spacing: 1em;
		}
	</style>
</head>
<body>
	
	<div id="app">
		<h1 class="thin italic active">这是一个狠狠大大的东西！</h1>
		<!--直接传递一个数组，注意这里class需要使用 v-bind 做数据绑定  -->
		<h1 :class="['thin','italic']">这是一个狠狠大大的东西！</h1>
		<!-- 在数组中使用三元表达式-->
		<h1 :class="['thin','italic',flag?'active':'']">这是一个狠狠大大的东西！</h1>
		<!-- 在class使用v-bind绑定对象时候，对象类型是全名。对象可带引号可不带引号-->
		<h1 :class="['thin','italic',{'active':fl}]">这是一个狠狠大大的东西！</h1>
		<h1 :class="cla">这是一个狠狠大大的东西！</h1>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data: {
				flag:false,
				fl:true,
				cla:{thin :true ,italic : true , active : true}
			},
			methods:{
			}
		})
	</script>
</body>
</html>